<template>
  <div>
    <el-button
      type="primary"
      color="#ea5b24"
      style="float: right"
      @click="showDialog(0, null)"
      v-if="pinia.isShow[48]"
      >添加</el-button
    >
    <el-table :data="tableData.data" style="width: 100%">
      <el-table-column prop="id" label="系列ID" />
      <el-table-column prop="name" label="系列名称" />
      <el-table-column prop="descp" label="描述" />
      <el-table-column prop="gmtCreate" label="创建时间" />
      <el-table-column fixed="right" label="操作" width="120">
        <template v-slot:default="scope">
          <div class="div-cell">
            <el-button
              link
              type="primary"
              size="small"
              @click="showDialog(1, scope.row)"
              v-if="pinia.isShow[49]"
              >编辑</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="remove(scope.row.id)"
              v-if="pinia.isShow[50]"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页插件 -->
    <div style="text-align: center">
      <el-pagination
        :total="totalNum"
        @current-change="handleCurrentChange"
        background
        :page-size="size"
        layout="prev, pager, next, total"
        :current-page="page"
      />

      <!--添加/编辑对话框 -->
      <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        center="true"
        modal="true"
        width="25%"
      >
        <el-form :model="model" :rules="rules" ref="ruleFormRef">
          <el-form-item label="id" :label-width="0" hidden="true">
            <el-input v-model.trim="model.id" autocomplete="off" />
          </el-form-item>
          <el-form-item
            label="系列名称"
            prop="name"
            :label-width="formLabelWidth"
          >
            <el-input v-model.trim="model.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              autosize
              v-model.trim="model.descp"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="btnCancel()">取消</el-button>
            <el-button
              type="primary"
              @click="formSubmit(ruleFormRef)"
              color="#ea5b24"
              >确定</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import {
  addVipSeriesApi,
  delVipSeriesApi,
  listVipSeriesApi,
  updateVipSeriesApi,
} from "../../../api/index";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();

// 分页数据
let tableData: any = reactive([]);
const totalNum = ref(0);
const activeIndex = ref("1");
let certinKey = ref(false);
const page = ref(1);
const size = 8;
// 翻页
const handleCurrentChange = (val: number) => {
  page.value = val;
  find();
};
const dialogVisible = ref(false);
const dialogTitle = ref("");
const dialogType = ref(0);
const formLabelWidth = "80px";
const model = reactive({
  id: null,
  name: null,
  descp: null,
});

//表单校验
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入系列名称", trigger: "blur" }],
});

// 控制添加/编辑dialog显示
const showDialog = (type: number, row) => {
  dialogVisible.value = true;
  dialogType.value = type;
  ruleFormRef.value ? ruleFormRef.value.clearValidate() : false;
  if (type === 0) {
    //添加权限
    dialogTitle.value = "添加系列";
    Object.keys(model).forEach((key) => (model[key] = null));
  } else {
    //编辑权限
    dialogTitle.value = "编辑系列";
    model.id = row.id;
    model.name = row.name;
    model.descp = row.descp;
  }
};

// 查询用户(分页)
const find = () => {
  listVipSeriesApi({
    page: page.value,
    size: size,
  }).then((res) => {
    if (res.data.code === 2000) {
      totalNum.value = res.data.data.total;
      tableData.data = res.data.data.data;
    } else {
      ElMessage.error("查询失败");
    }
  });
};

// 添加/编辑提交
const formSubmit = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (dialogType.value === 0) {
        addVipSeriesApi({
          name: model.name,
          descp: model.descp,
        }).then((res) => {
          if (res.data.code === 2000) {
            ElMessage({
              message: "添加成功.",
              type: "success",
            });
            find();
          } else {
            ElMessage.error("添加失败");
          }
        });
      } else {
        updateVipSeriesApi({
          id: model.id,
          name: model.name,
          descp: model.descp,
        }).then((res) => {
          if (res.data.code === 2000) {
            ElMessage({
              message: "编辑成功.",
              type: "success",
            });
            find();
          } else {
            ElMessage.error("编辑失败");
          }
        });
      }
      Object.keys(model).forEach((key) => (model[key] = null));
      dialogVisible.value = false;
    } else {
      return false;
    }
  });
};

// 删除系列
const remove = (id) => {
  delVipSeriesApi({
    series_id: id,
  }).then((res) => {
    if (res.data.code === 2000) {
      ElMessage({
        message: "删除成功.",
        type: "success",
      });
      find();
    } else {
      ElMessage.error("删除失败");
    }
  });
};

// 取消
const btnCancel = () => {
  // Object.keys(model).forEach((key) => (model[key] = null));
  dialogVisible.value = false;
};

onMounted(() => {
  find();
});
</script>

<style scoped></style>
